﻿<%@ Control Language="VB" Inherits="System.Web.Mvc.ViewUserControl" %>
<div id="measureDialog" title="Measure" class="hidden">
    <table>
        <tr>
            <th width="130px">
                Name:
            </th>
            <td  width="300px">
                <%= Html.TextBox("txtMeasureName", Nothing, New With {.class = "text"})%>
            </td>
        </tr>
        <tr>
            <th>
                Measure Type:
            </th>
            <td>
                <select id="ddlMeasureType">
                    <option value="Text" selected="selected">Text</option>
                    <option value="Dropdown">Dropdown</option>
                    <option value="Radiobutton">Radiobutton</option>
                    <option value="Checkbox">Checkbox</option>
                    <option value="Integer">Integer</option>
                    <option value="Decimal">Decimal</option>
                </select>
            </td>
        </tr>
        <tr>
            <th>
               <div id="lblValues" class="hidden">Values:</div>
            </th>
            <td>
                <input id="txtLookupValue" type="text" class="text hidden" onblur="fillOptimalValueDDL();" />
            </td>
        </tr>
        <tr>
            <th>
                <div id="lblOptimalValue" class="hidden">Optimal Value/Range:</div>
            </th>
            <td>
                <div id="pnlOptimalValue" class="hidden">
                    <select id="ddlOptimalLookupValue">
                        <option value="">Select...</option>
                    </select>
                </div>
                <div id="pnlOptimalRange" class="hidden">
                    <%= Html.TextBox("txtOptimalRangeMin", Nothing, New With {.class = "text"})%>&nbsp;:&nbsp;
                    <%= Html.TextBox("txtOptimalRangeMax", Nothing, New With {.class = "text"})%>
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <%= Html.CheckBox("cbxReqComments", ViewData("RequirementComments") IsNot Nothing)%>&nbsp;:&nbsp;
                Add the additional comments
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <br />
                <div class="right">
                    <input type="submit" class="button" value="Insert" onclick="insertMeasure();" />
                    <input type="submit" class="button" value="Cancel" onclick="closeDialog();" />
                </div>
            </td>
        </tr>
    </table>
</div>
    <script language="javascript" type="text/javascript">
        var maxId = $("#maxId").val();
        function addMeasure() {
            $("#measureDialog").dialog({
                modal: true,
                width: 600,
                height: 400,
                zIndex: 100
            });

            $("#txtLookupValue").val("").hide();
            $("#ddlMeasureType").val("Text");
            $("#txtMeasureName").val("");
            $("#pnlOptimalRange").hide();
            $("#pnlOptimalValue").hide();
            $("#lblOptimalValue").hide();
            $("#lblValues").hide();
            fillOptimalValueDDL();
        }

        function closeDialog() {
            $("#measureDialog").dialog("close");
        }

        function insertMeasure() {
            maxId++;

            var name = $("#txtMeasureName").val();
            var type = $("#ddlMeasureType").val();
            var optimalValue = $("#ddlOptimalLookupValue").val();
            var lookupValue = $("#txtLookupValue").val();
            var optimalMin = $("#txtOptimalRangeMin").val();
            var optimalMax = $("#txtOptimalRangeMax").val();
            var optValRangeText = "";
            var ReqComments = $("#cbxReqComments:checked").length;
            
            if (type === "Dropdown" || type === "Radiobutton" || type === "Checkbox") {
                optValRangeText = optimalValue;
                if (optimalValue === "") {
                    alert("Please, select OptimalValue.");
                    return;
                }
            }
            else if (type === "Integer" || type === "Decimal") {
                optValRangeText = optimalMin + "/" + optimalMax;
                if (optimalMin === "" || optimalMax === "") {
                    alert("Please, select range value");
                    return;
                }
            }

            if (name === "") {
                alert("Measure Name is required.");
                return;
            }

            var valuesToPost = '<input id="measureName_' + maxId + '" name="measureName_' + maxId + '" type="hidden" value="' + name + '"/>';
            valuesToPost += '<input id="measureType_' + maxId + '" name="measureType_' + maxId + '" type="hidden" value="' + type + '"/>';
            valuesToPost += '<input id="measureLookupValue_' + maxId + '" name="measureLookupValue_' + maxId + '" type="hidden" value="' + lookupValue + '"/>';
            valuesToPost += '<input id="measureOptimalLookupValue_' + maxId + '" name="measureOptimalLookupValue_' + maxId + '" type="hidden" value="' + optimalValue + '"/>';
            valuesToPost += '<input id="measureOptimalMin_' + maxId + '" name="measureOptimalMin_' + maxId + '" type="hidden" value="' + optimalMin + '"/>';
            valuesToPost += '<input id="measureOptimalMax_' + maxId + '" name="measureOptimalMax_' + maxId + '" type="hidden" value="' + optimalMax + '"/>';
            valuesToPost += '<input id="measureRequiredComments_' + maxId + '" name="measureRequiredComments_' + maxId + '" type="hidden" value="' + ReqComments + '"/>';


            var deleteBtn = '<input type="image" src="../../content/img/delete.png" onclick="deleteWithEffect(' + maxId + '); return false;" alt="Delete"/>';
            var ReqBtn = (ReqComments > 0) ? '<img src ="../../Content/img/active.gif" alt = "Enabled"/>' : '<img src ="../../Content/img/remove.png" alt = "Disabled"/>';
  
            var tr = $('<tr id="meas_' + maxId + '"><td>' + deleteBtn + '</td><td>' + name + valuesToPost + '</td><td>' + type + '</td><td>' + lookupValue + '&nbsp;</td><td>' + optValRangeText + '</td><td>'+ReqBtn+'</td></tr>');
            $("#maxId").val(maxId);
            $("#measureTable").find('tbody').append(tr);
            closeDialog();
            $("#meas_" + maxId + " td").effect('highlight', {}, 2000);
        }

        $('#ddlMeasureType').change(function () {
            var val = $(this).val();

            if (val === "Text") {
                $("#txtLookupValue").hide();
                $("#pnlOptimalRange").hide();
                $("#pnlOptimalValue").hide();
                $("#lblOptimalValue").hide();
                $("#lblValues").hide();
            } else if (val === "Integer" || val === "Decimal") {
                $("#txtLookupValue").hide();
                $("#pnlOptimalValue").hide();
                $("#lblOptimalValue").show();
                $("#pnlOptimalRange").show();
                $("#lblValues").hide();
            } else if (val === "Dropdown" || val === "Radiobutton") {
                $("#txtLookupValue").show();
                $("#pnlOptimalValue").show();
                $("#lblOptimalValue").show();
                $("#pnlOptimalRange").hide();
                $("#lblValues").show();
            } else if (val === "Checkbox") {
                $("#txtLookupValue").show().val("yes;no");
                var select = $("#ddlOptimalLookupValue");
                fillOptimalValueDDL();
                $("#txtLookupValue").show();
                $("#pnlOptimalValue").show();
                $("#lblOptimalValue").show();
                $("#pnlOptimalRange").hide();
                $("#lblValues").show();
            } else {
                $("#txtLookupValue").hide();
                $("#pnlOptimalRange").hide();
                $("#pnlOptimalValue").hide();
                $("#lblOptimalValue").hide();
                $("#lblValues").hide();
            }

        });

        function fillOptimalValueDDL() {
            var optimalValue = $("#txtLookupValue").val();
            var select = $("#ddlOptimalLookupValue");
            var values = optimalValue.split(";");
            select.html("");
            for (i = 0; i < values.length; i++) {
                select.append($("<option></option>").
                      attr("value", values[i]).
                      text(values[i]));
            }
        }

        function deleteWithEffect(id) {
            if (confirm("Do you really want to delete this measure?")) {
                $("#meas_" + id + " td").effect("highlight",
                    { mode: "hide", color: "#ff4444" },
                    1000,
                    function () {
                        $(this).remove();
                    });
            }
        }


    </script>